<template>
	<view class="container">
		<!-- <u-image style="line-height: 0" mode="widthFix" width="100%" height="auto" src="@/static/images/top-banner-ucp.jpg"></u-image> -->
		<view class="user-box u-p-l-30 u-p-r-30 u-p-b-30 u-p-t-30">
			<view class="u-flex">
				<view class="u-m-r-10">
					<u-avatar :src="user.avatar" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-6" style="font-size: 1.6em; font-weight: 600">{{ user.nickname }}</view>
					<view style="display: flex">
						<view style="margin-right: 14rpx">{{ user.mobile }}</view>
						<view class="user_level" v-if="user.level">
							<u-icon size="26" name="integral"></u-icon>
							{{ user.level.level_name }}
						</view>
					</view>
				</view>
			</view>
			<u-icon @click="logout" size="50" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-caa11b7840cbf0b13cc7949a6fc41784.png"></u-icon>
		</view>
		<view class="u-p-l-20 u-p-r-20">
			<view class="user_vip u-p-20 u-flex">
				<view style="display: flex; align-items: center">
					<u-icon size="50" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-ad90657bc1fb13f40629b48faa0c949b.png"></u-icon>
					<view style="margin-left: 10rpx">升级会员享会员权益</view>
				</view>
				<view class="user_vip_btn" @click="openPage('/pages/ucp/membership/upgrade')">兑换会员</view>
			</view>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-m-t-20">
			<view class="user_price">
				<view class="user_price_b" @click="openPage('/pages/ucp/balance')">
					<view style="font-size: 42rpx; font-weight: bold; margin-bottom: 16rpx">{{ user.balance }}</view>
					<view style="font-size: 22rpx; color: #666666">账户余额</view>
				</view>
				<view style="width: 1rpx; height: 60rpx; background-color: #ccc"></view>
				<view class="user_price_b" @click="openPage('/pages/ucp/my-vouchers')">
					<view style="font-size: 42rpx; font-weight: bold; margin-bottom: 16rpx">{{ user.active_vouchers || 0 }}</view>
					<view style="font-size: 22rpx; color: #666666">我的卡券</view>
				</view>
			</view>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-m-t-20">
			<view class="user_order">
				<view style="display: flex; justify-content: space-between">
					<view style="font-weight: 600; font-size: 30rpx; color: #222222">我的订单</view>
					<view style="color: #666666; font-size: 24rpx" @click="switchTab('/pages/ucp/orders')">
						全部订单
						<u-icon size="24" color="#999" name="arrow-right"></u-icon>
					</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-around; margin-top: 20rpx">
					<view style="display: flex; flex-direction: column; align-items: center" @click="switchTab('/pages/ucp/orders', { state: 'pending_pay' })">
						<u-icon size="80" color="#999" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-2db9e9066ab5bfb81665fac86cd079eb.png"></u-icon>
						<view style="font-size: 28rpx; color: #666666; margin-top: 10rpx">待支付</view>
					</view>
					<view style="display: flex; flex-direction: column; align-items: center" @click="switchTab('/pages/ucp/orders', { state: 'pending_send' })">
						<u-icon size="80" color="#999" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-0d56d934853ff86de2e336deb82a1226.png"></u-icon>
						<view style="font-size: 28rpx; color: #666666; margin-top: 10rpx">待发货</view>
					</view>
					<view style="display: flex; flex-direction: column; align-items: center" @click="switchTab('/pages/ucp/orders', { state: 'pending_receive' })">
						<u-icon size="80" color="#999" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-504dd23e119d3e502ba3de1faecf3eea.png"></u-icon>
						<view style="font-size: 28rpx; color: #666666; margin-top: 10rpx">待收货</view>
					</view>
					<view style="display: flex; flex-direction: column; align-items: center" @click="switchTab('/pages/ucp/orders', { state: 'pending_redeem' })">
						<u-icon size="80" color="#999" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-be72b83448d8fecfda7e42b8ba9cffa1.png"></u-icon>
						<view style="font-size: 28rpx; color: #666666; margin-top: 10rpx">待使用</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-m-t-20">
			<view class="user_car">
				<view style="display: flex; justify-content: space-between">
					<view style="font-weight: 600; font-size: 30rpx; color: #222222">我的爱车</view>
					<view style="color: #666666; font-size: 24rpx">
						车辆管理
						<u-icon size="24" color="#999" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="user_car_can" @click="openPage('/pages/ucp/registration')">
					<view class="user_car_can_c" v-if="user.car != [] && user.car.plate_number && user.car.plate_number.length != 0">
						<view>{{ user.car.plate_number }}</view>
					</view>
					<view class="user_car_can_c" v-else>
						<u-icon size="36" color="#999" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-c0cd7456f6c4bbbfe25fd31cd4136a34.png"></u-icon>
						<view style="margin-left: 10rpx; font-size: 24rpx; color: #666666">添加车辆</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-m-t-20">
			<view class="user_more">
				<view style="font-weight: 600; font-size: 30rpx; color: #222222; margin-bottom: 10rpx">更多功能</view>
				<view class="user_more_li" @click="openPage('/pages/buy/category')">
					<u-icon size="42" color="#222222" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-fae75d2fea043fc2814c847692623990.png"></u-icon>
					<view style="margin-left: 10rpx; font-size: 26rpx; color: #222222">礼品申领</view>
				</view>
				<view class="user_more_li" @click="openPage('/pages/ucp/address')">
					<u-icon size="42" color="#222222" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-5946d8e30ec357ff129254a659cb472c.png"></u-icon>
					<view style="margin-left: 10rpx; font-size: 26rpx; color: #222222">收货地址</view>
				</view>
				<view class="user_more_li" @click="openPage('/pages/ucp/invite-qrcode')">
					<u-icon size="42" color="#222222" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-4478e16023ce2cd91956e3657da687fc.png"></u-icon>
					<view style="margin-left: 10rpx; font-size: 26rpx; color: #222222">推广海报</view>
				</view>
				<view class="user_more_li" @click="openPage('/pages/ucp/my-referred')">
					<u-icon size="42" color="#222222" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-c9f659c4b430da3e42b1dfd24ffe9dbb.png"></u-icon>
					<view style="margin-left: 10rpx; font-size: 26rpx; color: #222222">我的推广</view>
				</view>
				<view class="user_more_li" @click="openPage('/pages/ucp/my-referred-orders')">
					<u-icon size="42" color="#222222" name="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-421d48ec64d54070a5331768755970c2.png"></u-icon>
					<view style="margin-left: 10rpx; font-size: 26rpx; color: #222222">推广订单</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="gift-fill" title="礼品申领" @click="openPage('/pages/buy/category')"></u-cell-item>
				<u-cell-item icon="level" title="我的爱车" @click="openPage('/pages/ucp/registration')">
					<template v-if="user.car && user.car.id">{{ user.car.car_brand }}-{{ user.car.car_type }}-{{ user.car.plate_number }}</template>
				</u-cell-item>
				<u-cell-item icon="map-fill" title="收货地址" @click="openPage('/pages/ucp/address')"></u-cell-item>
				<u-cell-item icon="photo-fill" title="推广海报" @click="openPage('/pages/ucp/invite-qrcode')"></u-cell-item>
				<u-cell-item icon="plus-people-fill" title="我的推广" @click="openPage('/pages/ucp/my-referred')"></u-cell-item>
				<u-cell-item icon="red-packet-fill" title="推广订单" @click="openPage('/pages/ucp/my-referred-orders')"></u-cell-item>
				<u-cell-item icon="minus-square-fill" title="重新登录" @click="logout"></u-cell-item>
			</u-cell-group>
		</view> -->
		<view class="u-m-t-20" v-if="user.store_id > 0 && user.store.id > 0">
			<u-cell-group>
				<u-cell-item
					class="store-title"
					icon="integral-fill"
					:title="'店铺管理: ' + user.store.shop_name"
					:arrow="false"
					hover-class="none"
					@click="openPage('/pages/ucp/store-manage/index')"
				></u-cell-item>
			</u-cell-group>
			<u-grid :col="4" :border="false">
				<u-grid-item @click="openPage('/pages/ucp/store-manage/store-manage', { action: 'pending' })">
					<u-image src="/static/images/icon-staff.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">店员管理</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/order-ucp', { action: 'verify' })">
					<u-image src="/static/images/icon-scan.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">验提货码</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/order-ucp-list', { action: 'pending' })">
					<u-image src="/static/images/icon-log.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">提货记录</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/store-inventory', {})">
					<u-image src="/static/images/icon-inventory.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">查询库存</view>
				</u-grid-item>
			</u-grid>
		</view>
		<wx-share :title="shop.name" :desc="shop.store_introduction" :imgUrl="shop.cover" :link="currentPage" ref="wxs"></wx-share>
		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentPage: location.href,
			scrollTop: 0,
			loadStatus: 'loadmore',
			flowList: [],
			shop: {},
			user: {},
			orderSummary: {
				pending_pay: 1,
				pending_send: 10,
				pending_receive: 0
			},
			itemList: [],
			paging: {
				sort_type: 'recommend',
				page_size: 50,
				current_page: 1,
				keyword: '',
				category_id: 0,
				total_pages: 1
			},
			loadStatus: 'loadmore',
			loadText: {
				loadmore: '加载更多',
				loading: '努力加载中',
				nomore: '加载完毕'
			},
			current: 0,
			activeCashBack: {}
		};
	},
	computed: {
		levelName() {
			if (this.user && this.user.level) {
				return this.user.level.level_name;
			}
			return '会员';
		},
		levelIconUrl() {
			let icon = '@/static/images/level_icon_1.png';

			return icon;
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad() {
		this.getItemList();
		this.getShop();
	},
	mounted() {
		this.getUserInfo();
	},
	onShow() {
		this.getUserInfo();
		this.getCart();
		this.getOrderSummary();
		this.getActiveCashBack();
	},
	onReachBottom() {
		if (this.paging.current_page >= this.paging.total_pages) {
			this.loadStatus = 'nomore';
			return;
		}
		this.loadStatus = 'loading';
		this.paging.current_page = ++this.paging.current_page;
		this.getItemList();
	},
	methods: {
		getActiveCashBack() {
			this.$u
				.post('/shopping/get-active-cash-back', {})
				.then((res) => {
					this.activeCashBack = res;
				})
				.catch((e) => {});
		},
		redeemCashBack() {
			this.$u
				.post('/shopping/redeem-cash-back', {})
				.then((res) => {
					this.activeCashBack = {};
					this.getUserInfo();
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.shop = res;
				})
				.catch((e) => {});
		},
		switchTab(jumpURL) {
			uni.switchTab({
				url: jumpURL
			});
		},
		getUserInfo() {
			this.$u
				.post('/user/info', {})
				.then((res) => {
					console.log(res);
					this.user = res;
					// 暂时行关闭用户必须完成注册
					// if (this.user.verified!=='yes') {
					// 	uni.showToast({
					// 		title: '请先完成车主注册'
					// 	})
					// 	this.openPage('/pages/ucp/profile')
					// }
				})
				.catch((e) => {
					console.log(e);
				});
		},
		openPage(jumpURL, params = {}) {
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		getItemList() {
			this.$u
				.post('/item/list', {
					page_size: this.paging.page_size,
					current_page: this.paging.current_page,
					sort: this.paging.sort_type
				})
				.then((res) => {
					if (res.page.current_page === 1) {
						this.itemList = res.list;
					} else {
						this.itemList = this.itemList.concat(res.list);
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				})
				.catch((e) => {});
		},
		getCart() {
			this.$u
				.post('/shopping/cart-list', {})
				.then((res) => {
					console.log(res);
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
				})
				.catch((e) => {});
		},
		getOrderSummary() {
			this.$u
				.post('/payment/order-summary', {})
				.then((res) => {
					this.orderSummary = res;
				})
				.catch((e) => {});
		},
		loadMore() {
			console.log('load more');
			if (this.paging.current_page < this.paging.total_pages) {
				this.paging.current_page = this.paging.current_page + 1;
				this.getItemList();
			}
		},
		logout() {
			this.$u
				.post('/user/logout', {})
				.then((res) => {
					uni.removeStorageSync('token');
					this.openPage('/pages/login/index');
				})
				.catch((e) => {});
		}
	}
};
</script>

<style scoped lang="scss">
.user_more {
	background-color: #fff;
	padding: 30rpx 20rpx;
	border-radius: 16rpx;
	.user_more_li {
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}
}
.user_order {
	background-color: #fff;
	padding: 30rpx 20rpx;
	border-radius: 16rpx;
}
.user_car {
	background-color: #fff;
	padding: 30rpx 20rpx 20rpx;
	border-radius: 16rpx;
	.user_car_can {
		width: 100%;
		height: 120rpx;
		background: #f3f3f3;
		margin-top: 20rpx;
		border-radius: 16rpx;
		.user_car_can_c {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.user_price {
	background-color: #fff;
	padding: 30rpx 20rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	.user_price_b {
		width: 50%;
		text-align: center;
	}
}
.user_vip {
	color: #fff;
	width: 100%;
	height: 124rpx;
	background: url('https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-b18e7c97563e57c4dfbfb5e0f94cc2b1.png') no-repeat center;
	background-size: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.user_vip_btn {
	background-color: #fff;
	height: 46rpx;
	line-height: 46rpx;
	padding: 0 14rpx;
	border-radius: 50rpx;
	font-size: 24rpx;
	color: #ff6240;
}
.container {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(180deg, #ffe7e7 0%, #ffffff 15%, #f5f5f5 35%);
	// background: #666;
}
.user_level {
	background-color: #222222;
	color: #edd1a0;
	font-size: 24rpx;
	height: 40rpx;
	line-height: 40rpx;
	padding: 0 10rpx;
	border-radius: 8rpx;
}

.inline-block {
	display: inline-block;
	padding-left: 0.5em;
}

.balance {
	font-size: 48rpx;
	font-weight: bold;
}

.balance.golden {
	color: #195ed7;
}

.balance.silver {
	color: #969695;
}

.grid-text {
	font-size: 28rpx;
	margin-top: 4rpx;
	color: $u-type-info;
}

.u-wrap {
	background-color: #fff;
}

.item-title {
	font-size: 28rpx;
	line-height: 1.8;
	height: 108rpx;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: calc(100vw / 2 - 38px);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -moz-box;
	-moz-line-clamp: 2;
	-moz-box-orient: vertical;
	overflow-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	overflow: hidden;
}

.item-remark {
	font-size: 26rpx;
	color: #333333;
	font-weight: 300;
	line-height: 1.8;
	height: 44rpx;
	margin-bottom: 10rpx;
}

.user-box {
	display: flex;
	justify-content: space-between;
}
.cash-back-wrap {
	border-radius: 8rpx;
	background-color: darkorange;
	color: white;
	padding: 0.3em;
	margin-top: 20rpx;
	margin-bottom: 0;
	line-height: 1.8;
	.title {
		font-size: 1.4em;
		border-bottom: 1px dashed;
	}
}
.terms-link {
	display: inline-block;
	text-decoration: underline;
	padding-left: 8rpx;
}
.store-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
